<template>
	<scroll-view>
		<view class="headerCenter">
			<text>剩</text>
			<uni-countdown  :show-day="false"  backgroundColor="#ff700a" color="#ffffff"  :hour="30" :minute="59" :second="59"></uni-countdown>
			<text>自动关闭</text>
		</view>
		<view  class="content">
			<!-- 地址 -->
			<view class="address">
				<view class="addressImage">
					<image src="https://z3.ax1x.com/2021/04/10/casxiT.png"></image>
				</view>
				<view class="addresslist">
					<view>
						<text class="name">{{addressInfo[0].addressContactName}}</text>
						<text class="call">{{addressInfo[0].addressContactTel}}</text> 
					</view>
					<view>
						<view class="text">
							<text>{{addressInfo[0].addressDetail}}</text>
						</view>
						<view class="image">
							<navigator url="../mall-address/mall-address" open-type="navigate">
								<image src="https://z3.ax1x.com/2021/04/09/cUYpp6.png"></image>
							</navigator>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="substance">
			<view class="goods">
				<view class="header">商品</view>
				<!-- 渲染订单数据 -->
				<view class="goodlistes">
					<view class="goodItem" v-for="item in goodlistes" :key="item.productId">
						<navigator :url="'../productDetails/productDetails?productId='+item.productId " open-type="navigate">
						<view class="itemImage">
							<image :src="item.productImage"></image>
						</view>
						<view class="center">
							<view>{{item.productDetail}}</view>
							<view>
								<text class="text1">￥{{item.productSeckill}}</text>
								<text class="text2">×{{item.productCollectnum}}</text>
							</view>
						</view>
						</navigator>
					</view>
				</view>
				<view class="addcart">
					<!-- <text class="cart">加入购物车</text> -->
				</view>			
				<view class="method">
					<view class="one">
						<view class="pay">
							<text>
								商品总原价
							</text>
							</view>
						<view class="money">
							<text class="text1">￥</text>
							<text class="text2">{{getProductPrice}}.00</text>
						</view>
					</view>
					<view class="two">
						<view class="pay">
							<text>运费</text>
							</view>
						<view class="money">
							<text>￥0</text>
						</view>
					</view>
					<view class="two">
						<view class="pay">
							<text>优惠劵</text>
							</view>
						<view class="money">
							<text>-￥0</text>
						</view>
					</view>
					<view class="two">
						<view class="pay">
							<text>活动优惠</text>
						</view>
						<view class="money">
							<text>-￥{{getProductPrice-getTotalPrice}}</text>
						</view>
					</view>
					
					<view class="three">
						<view>
							<text class="threeOne">需付款</text>
							<text class="threeTwo">￥{{getTotalPrice}}.00</text>
							<image src="https://z3.ax1x.com/2021/04/10/cdTew8.png"></image>
						</view>
					</view>
					
				</view>
			
			</view>
			
			<view class="order">
				<view class="one">
					<view class="pay">
						<text>
							订单信息
						</text>
						</view>
					<view class="money">
						<text class="text1">查看更多</text>
						<image src="https://z3.ax1x.com/2021/04/10/cdIlNQ.png"></image>
					</view>
				</view>
				<view class="two">
					<view class="pay">
						<text class="payOne">
							订单编号
						</text>
						<text class="payTwo">
							16522552256212
						</text>
						</view>
					<view class="money">
						<text class="text1">复制</text>
						
					</view>
				</view>
			
				<view class="three">
					<view>
						<image src="https://z3.ax1x.com/2021/04/10/cdHsIO.png"></image>
						<text>联系客服</text>
					</view>
				</view>
			</view>
			
			<!-- 精选推荐 -->
			<Selected></Selected>	
		</view>
		<view class="location">
			<view class="pay">
				<text>帮我付</text>
			</view>
				
			<view class="pay" >
				<text type="primary" @click="toggle">
					取消订单
				</text>
			
			</view>
			<view class="paymoney">
				<navigator :url="'../mall-PaymentSuccessful/mall-PaymentSuccessful?getTotalPrice='+getTotalPrice" open-type="redirect">
					<text type="primary">付款</text>
				</navigator>
				
			</view>
		</view>
		  
		<!-- 弹出层 -->
		<uni-popup class="eject" ref="popup" type="bottom">
			<view class="ejectCenter">
					<view class="remove">订单取消</view>
					<view class="cancel">
						<text>取消后无法恢复，优惠劵，红包可退回，有效期内使用</text>
					</view>
					<view class="cause">
						<text>请取消订单的原因</text>
					</view>
					<view class="reason">
						<radio-group  v-for="(item,index) in radioItems" :key="index"> 
							<view>{{item.value}}</view>
							<radio :value="item.value" color="#ff5300"   :checked="item.checked"  @click="radioChange(item.id)"></radio>
						</radio-group>
						
					</view>
					<view class="locationRight">
						<view @click="hands"> 
							 <text> 暂不取消</text>
						</view>   
						<view @click="itemClick">
							 <text>确定取消</text>
						</view>
					</view>
			</view>
			
		</uni-popup>
	</scroll-view>
</template>

<script>
	import Selected from '../../../components/selected-recommendation/selected-recommendation.vue'
	
	// 状态机
	import {createNamespacedHelpers} from 'vuex'
	const {
		mapState,
		mapActions,
		mapMutations
	} = createNamespacedHelpers("mine")
	
	export default {
		data() {
			return {
				goodlistes:[],
				radioItems: [
								{
									id:1,
				                    value: '价格有点贵',
									checked:false
				                },
				                {
				                    id:2,
									value: '规格/款式/数量拍错',
				                    checked:false
				                },
								{
									id:3,
									value: '收货地址拍错',
									checked:false
								},
								{
									id:4,
									value:'暂时不需要了',
									checked:false
								},
								{
									id:5,
									value:'其他',
									checked:false
								}
				   ]
				   
				 
			}
		},
		computed:{
			...mapState(["addressInfo"]),
			getTotalPrice(){
				let newArr=uni.getStorageSync('paygoodlist')
				return newArr.reduce((acc,cur)=>{
					return acc+cur.productSeckill*cur.productCollectnum
				},0)
			},
			getProductPrice(){
				let newArr=uni.getStorageSync('paygoodlist')
				return newArr.reduce((acc,cur)=>{
					return acc+cur.productPrice*cur.productCollectnum
				},0)
			}
		},
		onLoad() {
			this.goodlistes=uni.getStorageSync('paygoodlist')
			this.getAddressAll()
			// console.log(this.goodlistes);
		},
		methods: {
			//获取默认地址
			...mapMutations(["setAddress"]),
			...mapActions(["getAddressAll"]),
			toggle(){
				this.$refs.popup.open()
				
			},
			hands(){
				this.$refs.popup.close()
			},
			//点击切换样式    
			radioChange(e){
				const val= this.radioItems.filter((item)=>item.id==e)
				// console.log(val[0].checked)
				if(!val[0].checked){
					val[0].checked=true
					
				}else{
					val[0].checked=false
				}
			},
			//点击订单取消原因，跳转到取消成功
			itemClick(){
				const value=this.radioItems.filter((item)=>item.checked==true)
				console.log(value.length)
				if(value.length>0){
					uni.navigateTo({
						url:'../mall-closed/mall-closed'
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'请选择订单取消原因'
					})
				}
			},
	
		},
		components:{
			Selected
		}
	}
</script>

<style lang="scss" scoped>
	.headerCenter{
		background-color: #ff700a;
		color: #FFFFFF;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}
	
	
	.content{
		background-color: #f0f0f0;
		box-sizing: border-box;
		padding: 36rpx 18rpx 18rpx 18rpx;
		/* 地址 */
		.address{
					width: 100%;
					background-color: #ffffff;
					border-radius: 20rpx;
					display: flex;
					box-sizing: border-box;
					padding: 10rpx;
					.addressImage{
						width: 15%;
						// height: 160rpx;
						// background-color: #4CD964;
						display: flex;
						align-items: center;
						image{
							width: 95%;
							height: 90rpx;
						}
					}
					.addresslist{
						box-sizing: border-box;
						padding: 10rpx;
						width: 85%;
						view{
							&:nth-of-type(1){
								margin-bottom: 10rpx;
								.name{
									font-weight: bold;
									opacity: 0.8;
									font-size: 30rpx;
									margin-right: 20rpx;
								}
								.call{
									color: #555555;
									opacity: 0.8;
									font-size: 26rpx;
								}
								
							}
							&:nth-of-type(2){
								display: flex;
								margin-bottom: 10rpx;
								justify-content: space-between;
								.text{
									width: 80%;
									color: #555555;
									opacity: 0.8;
									font-size: 26rpx;
								}
								.image{
									width: 20%;
									display: flex;
									align-items: center;
									position: relative;
									image{
										position: absolute;
										right: 0rpx;
										width: 15rpx;
										height: 20rpx;
									}
								}
								
							}
							
						}
					}
				}
	}
	//商品
	.substance{
		margin-bottom: 80rpx;
		background-color: #f0f0f0;
		box-sizing: border-box;
		padding: 24rpx;
		// border: 1rpx solid red;
		.goods{
			width: 100%;
			margin-bottom: 24rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			.header{
				width: 100%;
				height: 60rpx;
				opacity: 0.8;
				font-weight: bold;
			}
			.goodlistes{
				.goodItem{
					margin-bottom: 20rpx;
					navigator{
						display: flex;
						justify-content: space-between;
						.itemImage{
							width: 20%;
							image{
								width: 120rpx;
								height: 120rpx;            
							}
							
						}
						.center{
							width: 80%;
							padding-left: 24rpx;
							view{
								&:nth-of-type(1){
									color: #333333;
									font-size: 28rpx;
									opacity: 0.8;
									height: 60%;
									overflow: hidden;
									-webkit-line-clamp: 2;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									// margin-bottom: 20rpx;
								}
								&:nth-of-type(2){
									float: right;
									.text1{
										font-weight: bold;
										font-size: 28rpx;
										opacity: 0.8;
										margin-right: 10rpx;
										
									}
									.text2{
										color: #555555;
										font-size: 28rpx;
									}
									
								}
							}
						}
					}
					
				}
				
			}
			.addcart{
				position: relative;
				margin-bottom: 60rpx;
				
				.cart{
					right: 0rpx;
					position: absolute;
					margin-right: 10rpx;
					width: 150rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					border-radius: 20rpx;
					border: 2rpx solid #bebebe;
					background-color: #ffffff;
					color:  #bebebe;
					font-size: 20rpx;
					font-weight: bold;
				}
			}
			
			.method{
				// border: 1rpx solid red;
				width: 100%;
				// margin-bottom: 24rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 20rpx;
				.one{
					display: flex;
					margin-bottom: 10rpx;
					justify-content: space-between;
					.pay{
						margin-right: 20rpx; 
						text{
							font-size: 28rpx;
							opacity: 0.8;
							font-weight: bold;
						}
					}
					.money{
						.text1{
							font-size: 20rpx;
							color: #808080;
							font-weight: bold;
						}
						.text2{
							font-size: 28rpx;
							color: #808080;
							font-weight: bold;
						}
					}
					
				}
				
				.two{
					display: flex;
					margin-bottom: 20rpx;
					justify-content: space-between;
					.pay{
						margin-right: 20rpx; 
						text{
							font-size: 28rpx;
							opacity: 0.8;
							font-weight: bold;
						}
					}
					.money{
						text{
							font-size: 24rpx;
							color: #ff5500;
							font-weight: bold;
						}
						
					}
					}
				}
				
				.three{
					width: 100%;
					height: 50rpx;
					position: relative;
					view{
						right: 0rpx;
						position: absolute;
						.threeOne{
							font-size: 30rpx;
							font-weight: bold;
							margin-right: 10rpx;
						}
						.threeTwo{
							font-size: 28rpx;
							color: #ff5500;
							font-weight: bold;
							margin-right: 10rpx;
						}
						image{
							width: 20rpx;
							height: 15rpx;
						}
					}
			}
			
		}
		.order{
			margin-top: 20rpx;
			width: 100%;
			background-color: #ffffff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			.one{
				display: flex;
				margin-bottom: 10rpx;
				justify-content: space-between;
				.pay{
					margin-right: 20rpx; 
					text{
						font-size: 28rpx;
						opacity: 0.8;
						font-weight: bold;
					}
				}
				.money{
					.text1{
						font-size: 20rpx;
						color: #808080;
						font-weight: bold;
						margin-right: 10rpx;
					}
					image{
						width: 20rpx;
						height: 15rpx;
					}
				}
				
				
			}
			.two{
				display: flex;
				margin-bottom: 10rpx;
				justify-content: space-between;
				.pay{
					margin-right: 20rpx; 
					.payOne{
						font-size: 26rpx;
						opacity: 0.8;
						font-weight: bold;
						margin-right: 20rpx;
					}
					.payTwo{
						font-size: 20rpx;
						color: #808080;
						margin-right: 10rpx;
					}
				}
				.money{
					.text1{
						font-size: 20rpx;
						color: #ff5500;
						opacity: 0.6;
						font-weight: bold;
						margin-right: 10rpx;
					}
				}	
			}
			.three{
				border-top: 1rpx solid #e7e7e7;
				margin-top: 10rpx;
				padding-top: 10rpx;
				text-align: center;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
				text{
					font-size: 28rpx;
					color: #808080;
				}
			}
		}
		
	}
	.location{
		width: 99%;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #ffffff;
		position: fixed;
		border-radius: 25rpx;
		bottom: 0rpx;
		left: 0rpx;
		display: flex;
		justify-content: center;
			.pay{
				width: 180rpx;
				position: relative;			
				text{
					position: absolute;
					right: 0rpx;
					display: inline-block;
					margin-right: 10rpx;
					width: 120rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					border-radius: 25rpx;
					border: 2rpx solid #e6e6e6;
					background-color: #ffffff;
					color:  #9d9d9d;
					font-size: 20rpx;
					font-weight: bold;
				}
			}
			.paymoney{
				// width: 180rpx;
				margin-left: 60rpx;
				
				navigator{
					display: flex;
					align-items: center;
					text{
						display: inline-block;
						margin-right: 10rpx;
						width: 120rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						border-radius: 20rpx;
						color:  #ffffff;
						font-size: 20rpx;
						font-weight: bold;
						background-color: #ff7d31;
					}
				}
				
			}
	}
	
	.eject{
		
		.ejectCenter{
			width: 100vw;
			box-sizing: border-box;
			padding: 20rpx;
			background-color: #FFFFFF;
			border-radius:20rpx;
			margin-top: 20rpx;
			.remove{
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
				margin-bottom: 40rpx;
			}
			.cancel{
				width: 100%;
				border-radius: 20rpx;
				background-color: #ececec;
				opacity: 0.8;
				font-size: 24rpx;
				text-align: center;
				margin-bottom: 20rpx;
				text{
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					color:  #000000;
					font-weight: bold;
				}
				
			}
			.cause{
				margin-bottom: 20rpx;
				width: 100%;
				border-radius: 20rpx;
				background-color: #ffffff;
				opacity: 0.8;
				font-size: 24rpx;
				text{
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					color:  #c2c2c2;
				}
			}
			.reason{
				
				radio-group{
					display: flex;
					justify-content: space-between;
					view{
						font-size: 26rpx;
						font-weight: bold;
						opacity: 0.8;
					}
					radio{
						transform: scale(0.5);
					}
				}
				
			}
			.locationRight{
				width: 100%;
				box-sizing: border-box;
				padding-top: 40rpx;
				display: flex;
				margin-bottom: 40rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-top: 20rpx;
				view{
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					&:nth-child(1){
						text-align: center;
						border-radius: 50rpx 0rpx 0rpx 50rpx;
						background:linear-gradient(90deg,#ffd743 0%,#ffba17 30%,#ffa811 51%,#ff9819 100%);
						width: 50%;
					}
					&:nth-child(2){
						text-align: center;
						width: 50%;
						border-radius: 0rpx 50rpx 50rpx 0rpx;
						background:linear-gradient(90deg,#ff4b2c 0%,#ff4027 30%,#ff3a17 51%,#ff0004 100%);
					}
				}
				
				
			}
			
		}
		
	}
	
</style>
